body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
}
#sidebar {
width: 250px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
background: linear-gradient(135deg, #6e45e2 0%, #88d3ce 100%);
box-shadow: 0 4px 15px 0 rgba(0,0,0,0.24);
color: #fff;
overflow-y: auto;
padding: 20px;
}
.menu-item {
cursor: pointer;
position: relative;
padding: 10px;
transition: background-color 0.3s;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.menu-item:hover,
.menu-item.active {
background-color: rgba(255, 255, 255, 0.1);
}
.menu-item .menu-title {
display: flex;
align-items: center;
}
.menu-item .toggle-button {
font-size: 24px;
cursor: pointer;
}
.menu-item .toggle-button::before {
content: '-'; 
}
.menu-item.open .toggle-button::before {
content: '|'; 
}
.menu-item .submenu {
display: none;
padding: 10px 0;
margin-top: 5px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.menu-item .submenu2 {
    display: flex;
    align-items: center;
    }
.menu-item.open .submenu {
display: block;
}
.menu-item .submenu a {
display: block;
padding: 5px 10px;
color: #fff;
text-decoration: none;
transition: background-color 0.3s;
}
.menu-item .submenu2 a {
    padding: 5px 0px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s;
    }
.menu-item .submenu a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
#main-content {
margin-left: 250px;
width: calc(100% - 250px);
height: 100%;
position: relative;
}
iframe#content-iframe {
width: 100%;
height: 100%;
border: none;
}